import { useDispatch } from 'react-redux';
import Button from '../../ui/Button.jsx';
import { formatCurrency } from '../../utils/helpers.js';
import { removeItem } from './cartSlice.js';

function CartItem({ item }) {
  const { pizzaId, name, quantity, unitPrice } = item;
  const dispatch = useDispatch();

  return (
    <li
      key={pizzaId}
      className="py-3 sm:flex sm:items-center sm:justify-between"
    >
      <p className="mb-1 sm:mb-0">
        {quantity}&times; {name}
      </p>
      <div className="flex items-center justify-between sm:gap-6">
        <p className="text-sm font-bold">
          {formatCurrency(quantity * unitPrice)}
        </p>
        <Button type="small" onClick={() => dispatch(removeItem(item.pizzaId))}>
          Delete
        </Button>
      </div>
    </li>
  );
}

export default CartItem;
